<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="贾文清">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        nav {
            width: 100%;
            height: 50px;
            background-color: #10c55b;
        }

        .container {
            width: 1200px;
            height: 50px;
            line-height: 50px;
            /* border: 1px solid red; */
            margin: 0 auto;
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .ul1 li:nth-child(1) {
            width: 60px;
            height: 50px;
            background-color: #01923d;
            color: #fff;
            border-color: #01923d;
        }

        .ul1 li {
            width: 90px;
            height: 50px;
            float: left;
            text-align: center;
            padding-left: 4px;
        }

        .ul1 li:hover {
            background-color: #01923d;
            color: #fff;
            border-color: #01923d;
        }

        .ul1 li a {
            text-decoration: none;
            font-size: 16px;
            color: white;
            margin-left: 2px;
        }

        .right span {
            display: block;
            width: 80px;
            height: 50px;
            text-align: center;
            float: left;
        }

        .right .span1 {

            width: 22px;
            height: 16px;
            background: url(./img/common.png) -156px -386px no-repeat;
            background-position-x: -127px;
            margin-top: 18px;
        }

        .right span a {
            font-size: 16px;
            color: white;
            text-decoration: none;
        }

        .right span:nth-child(2) a {
            display: block;
            font-size: 12px;
            width: 60px;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            margin-left: 8px;
            border-radius: 4px;
            background-color: #01923d;
            color: #fff;
            border-color: #01923d;
        }

        .right span:nth-child(2) a:hover {
            box-shadow: 0 0 3px #01ac48;
        }

        .right span:nth-child(4) a {
            font-size: 12px;
            color: #01923d;
        }

        .middle {
            width: 1200px;
            height: 80px;
            padding-top: 10px;
            margin: 0 auto;
            /* border: 1px solid red; */
            margin-top: 30px;
        }

        .qtw {
            float: left;
        }

        .qtw a {
            width: 141px;
            height: 65px;
            line-height: 65px;
            display: inline-block;
            background-image: url(./img/qtw.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .search-box {
            width: 700px;
            height: 50px;
            line-height: 50px;
            border: 1px solid blue;
            margin-left: 200px;
            border-radius: 4px;
            border-color: lightgray;
            position: relative;
        }

        .button {
            width: 100px;
            height: 50px;
        }

        .search-box .qz {
            padding-left: 20px;
            width: 80px;
            height: 65px;
            float: left;
            cursor: pointer;
            font-size: 14px;
            color: #666;
        }

        .search input {
            border: 0;
            width: 500px;
            color: #666;
            font-size: 14px;
        }

        .search-button {
            width: 80px;
            height: 50px;
            vertical-align: middle;
            border-radius: 0 4px 4px 0;
            background-image: linear-gradient(to right, #17e66c, #10c55b);
            border-color: #01923d;
            cursor: pointer;
            position: absolute;
            right: -3px;
            border: 0;
        }

        .search-button span {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-top: 15px;
            background: url(./img/common.png) -66px -446px no-repeat;
            margin-top: -1px;
            text-align: center;
            vertical-align: middle;
        }


        .hot-resou {
            position: absolute;
            margin-top: -4px;
            padding-left: 5px;
            font-size: 13px;
            width: 600px;
            height: 30px;
            line-height: 30px;
        }

        .hot-resou a {
            text-decoration: none;
            font-size: 13px;
            padding-left: 10px;
            color: #666;
        }

        .hot-resou .hot {
            color: #17e66c;
        }

        .hot-resou .hot2:hover {
            color: #17e66c;
        }

        .lbt {
            width: 100%;
            height: 320px;
            /* border: 1px solid red; */
            margin-top: 30px;
            background-color: rgb(255, 248, 196);
            opacity: 1;
        }


        .box {
            width: 1200px;
            height: 320px;
            margin: 0 auto;

            position: relative;
        }

        .img-list li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .img-list .current {
            display: block;
        }

        .img-click span {
            width: 50px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            font-size: 40px;
            color: white;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: calc(50% - 70px);
            cursor: pointer;
        }
        /* .img-click{
            display: none;
        }  */

        .img-click .prev {
            display: none;
            left: -460px;
        }

        .img-click .next {
            display: none;
            right: -460px;
        }

        .indicator {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 10px;
            display: flex;
            justify-content: center;
            color: white;
        }

        .indicator li {
            width: 15px;
            height: 15px;
            background-color: #aaa;
            text-align: center;
            line-height: 15px;
            margin: 0 1px;
            border-radius: 50%;
        }
        /* .indicator li:hover{
             color:#10c55b;
         }  */

        .indicator li.active {
            background-color: #17e66c;
            cursor: pointer;
        }

        .main {
            width: 100%;
            margin-top: 36px;
        }

        .zhuanti,
        .haibao {
            width: 1200px;
            height: 33px;
            margin: 0 auto;
            margin-bottom: 30px;
        }

        .f1 {
            float: left;
        }

        .f1 .icon-jx {
            background-position: -96px -415px;
        }

        .f1 i {
            display: inline-block;
            width: 30px;
            height: 30px;
            vertical-align: middle;
            background: url(./img/common.png) no-repeat;
            vertical-align: bottom;
            margin-right: 10px;
        }

        .f1 span {
            font-size: 24px;
            color: #666;
        }

        .f2 {
            line-height: 30px;
        }

        .f2 a {
            display: inline-block;
            margin-left: 30px;
            font-size: 14px;
            color: #888;
            cursor: pointer;
            text-decoration: none;
        }

        .f2 a:hover,
        .f3 a:hover {
            color: orangered;
        }

        .f3 {
            float: right;
            margin-top: -27px;
        }

        .f3 a {
            color: #666;
            text-decoration: none;
        }

        .picture1 {
            width: 1200px;
            height: 200px;
            margin: 0 auto;
            /* border:1px solid red; */
        }

        .picture1 div {
            width: 290px;
            height: 200px;
            /* border:1px solid blue; */
            float: left;
            position: relative;
            margin-left: 8px;
        }

        .picture1 .pic1 {
            width: 290px;
            height: 200px;
            background-image: url(./img/jxzt01.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .picture1 .pic2 {
            background-image: url(./img/jxzt02.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .picture1 .pic3 {
            background-image: url(./img/jxzt03.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .picture1 .pic4 {
            background-image: url(./img/jxzt04.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .haibao {
            margin-top: 30px;
        }

        .haibao .f22 {
            float: left;
        }

        .f22 span {
            font-size: 24px;
            color: #666;
        }

        .f22 .icon-hb {
            background-position: -126px -415px;
        }

        .f22 i {
            display: inline-block;
            width: 30px;
            height: 30px;
            vertical-align: middle;
            background: url(./img/common.png) no-repeat;
            vertical-align: bottom;
            margin-right: 10px;
        }

        .picture2 {
            width: 1200px;
            height: 416px;
            margin: 0 auto;
            /* border: 1px solid red; */
        }

        .picture2 .jjjw {
            width: 290px;
            height: 386px;
            /* border:1px solid blue; */
            float: left;
            position: relative;
            margin-left: 8px;
        }

        .picture2 .pic11 {
            width: 290px;
            height: 386px;
            background-image: url(./img/syhb01.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .picture2 .pic22 {
            width: 290px;
            height: 386px;
            background-image: url(./img/syhb02.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .picture2 .pic33 {
            width: 290px;
            height: 386px;
            background-image: url(./img/syhb03.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .picture2 .pic44 {
            width: 290px;
            height: 386px;
            background-image: url(./img/syhb04.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .pic11 a .icon,
        .pic22 a .icon,
        .pic33 a .icon,
        .pic44 a .icon {
            background-position: 0 0;
        }

        .pic11 a i,
        .pic22 a i,
        .pic33 a i,
        .pic44 a i {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 53px;
            height: 53px;
            background: url(./img/common.png) no-repeat;
            background-position-x: 0%;
            background-position-y: 0%;
        }

        .last {

            width: 100%;
            height: 318px;
            bottom: 0;
            /* border:1px solid red;  */
        }

        .last-box {
            width: 1200px;
            height: 318px;
            margin: 0 auto;
            /* border:1px solid red; */
        }

        .last-left {
            width: 800px;
            height: 250px;
            /* border:1px solid red; */
        }

        .last-left .w1 {
            float: left;
            padding-left: 60px;
            font-size: 12px;
        }

        .last-left .w1 li {
            padding-top: 10px;
        }

        .last-left .w1 li a {
            color: #888;
            text-decoration: none;
        }

        h3 {
            color: #333;
        }

        .last-right {
            position: relative;
            margin-top: -250px;
            width: 300px;
            height: 250px;
            /* border:1px solid blue; */
            float: right;
        }

        p a {
            text-decoration: none;
        }

        .last-right .P1 a {
            color: #666;
            font-size: 18px;
        }

        .P2 {
            color: #666;
            font-size: 18px;
        }

        .P2 .icon-phone {
            background-position: -65px -176px;
        }

        .P2 i {

            display: inline-block;
            width: 26px;
            height: 26px;
            vertical-align: middle;
            background: url(./img/common.png) no-repeat;
        }

        .P3 a {
            color: #666;
            font-size: 18px;
        }

        .P3 .icon-email {
            background-position: -34px -176px;
        }

        .P3 i {
            display: inline-block;
            width: 26px;
            height: 26px;
            vertical-align: middle;
            background: url(./img/common.png) no-repeat;
        }

        .P4 {
            width: 140px;
            height: 40px;
            line-height: 40px;
            background-color: #17e66c;
            border-radius: 4px;
        }

        .P4 a {
            color: #fff;
        }

        .P4 .icon-qq {
            background-position: -1px -176px;
            margin-right: 10px;
        }

        .P4 i {
            display: inline-block;
            width: 26px;
            height: 26px;
            vertical-align: middle;
            background: url(./img/common.png) no-repeat;
        }

        .bottom {
            margin: 0 auto;
            width: 1100px;
            height: 68px;
            /* border: 1px solid green; */
            margin-top: -68px;
        }

        .m1 {
            float: left;
            margin-left: 10px;
        }

        .m2 {
            padding-top: 12px;
        }

        .m2 a {
            font-size: 14px;
            padding-left: 14px;
            color: #888;
        }

        .m2 a:hover {
            color: #17e66c;
        }

        .m3 {
            float: right;
            margin-top: -35px;
        }

        .m1 .icon-xinlang {
            background-position: -65px -206px;
        }

        .m1 i {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 20px;
            /* vertical-align: middle; */
            background: url(./img/common.png) no-repeat;
        }

        .m1 .icon-weibo {
            background-position: -35px -206px;
            position: relative;
        }

        .m3 {
            font-size: 14px;
            color: #888;
        }

        .hao {
            color: #666;
        }

        .m3 i {
            display: inline-block;
            vertical-align: middle;
            width: 23px;
            height: 25px;
            background: url(./img/common.png) -163px -20px no-repeat;
        }

        .yc1 {
            width: 300px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            float: left;   
        }

        .yc1 a {
            margin-left: 6px;
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        /*-------------------------------------------------------------------  */
        .picture1 .ppp{
            overflow: hidden;
        }
       #yinying {
            position: absolute;
            margin-left: 9px;
            width: 290px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            transition: all 0.3s;
            opacity: 0;
        }
         .ppp:hover #yinying{
            opacity: 1;
        }
        .content{
              width: 61%; 
               border-top: 1px solid white;
              border-bottom: 1px solid white; 
              position: absolute; 
              top: 100%; 
              left: 20%; 
              color:white;
              text-align: center;
        }
        .ppp:hover .content{
                 top:30%;
                 transition: all 0.3s;
             }
        /*--------------------------------------------------------------  */
        .picture2 .jjjw{
             overflow: hidden; 
        }

        #bbb {
            position: absolute;
            margin-left: 0;
            width: 290px;
            height: 386px;
            background-color:rgba(0, 0, 0, 0.5);
            transition: all 0.3s;
            opacity: 0;
        }
        .jjj:hover #bbb{
            opacity: 1;
        }
        #content2 .icon-card1 {
             background-position-x: -3px;
             margin-left: 170px; 
             
        }
             #content2 {
                 width: 300px;
                 height: 300px;
                 position: absolute;
                 margin-top: -75px;
                 z-index: 9;
             }
         .jjj:hover #content2{
            margin-top: 10px; 
            transition: all 0.3s;
            }  

        #content2 .icon-card1:hover {
            background-position-y: -104px;
        }

        #content2 .icon-card2 {
            background-position-x: -58px;
            margin-left: 220px;
            margin-top: -75px;
        }

        #content2 .icon-card2:hover {
            background-position-y: -104px;
        }

        #content2 i {
            display: block;
            width: 54px;
            height: 54px;
            background: url(./img/common.png) no-repeat;
            background-position-y: -48px;
        }

        .xiazai,
        .dingyue {
            margin: 0;
            padding: 0;
            display: inline-block;
            font-size: 14px;
            color: white;
            z-index: 100;
        }

        .xiazai {
            margin-left: 185px;
        }

        .dingyue {
            margin-left: 241px;
        }

        #green a:hover {
            color: #17e66c;
        }

        .right .vip:hover {
            color: #01923d;
        }
    </style>
</head>

<body>
    <nav>
        <section class="container clearfix">
            <div class="left clearfix">
                <ul class="ul1">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">所有分类&#8744; </a></li>
                    <li><a href="#">设计创意</a></li>
                    <li><a href="#">办公创意</a></li>
                    <li><a href="#">.&nbsp;.&nbsp;.</a></li>
                </ul>
            </div>
            <div class="right" clearfix>
                <span class="vip">
                <span class="span1"></span>
                <a href="#">VIP中心</a>
                </span>
                <span class="login"><a href="#">请登录</a> </span>
                <span class="register"><a href="#">免费注册</a></span>
            </div>
        </section>
    </nav>
    <section class="middle">
        <div class="qtw clearfix"><a href=""></a></div>
        <div class="search-box">
            <div class="qz">全站&#8744; |</div>
            <div class="search">
                <input type="text" placeholder="800万免费设计素材任意下载">
                <button class="search-button"> <span></span></button>
            </div>
            <p class="hot-resou">
                <span>热门搜索：</span>
                <a href="#" class="hot">七夕</a>
                <a href="#" class="hot2">详情页</a>
                <a href="#" class="hot">icon</a>
                <a href="#" class="hot2">主图</a>
                <a href="#" class="hot">秋季</a>
                <a href="#" class="hot">ppt模板</a>
                <a href="#" class="hot2">EXCEL模板</a>
                <a href="#" class="hot2">首页</a>
                <a href="#" class="hot2">个人简历</a>
                <a href="#" class="hot">装饰画</a>
            </p>

    </section>
    <section class="lbt">
        <div class="box">
            <ul class="img-list">
                <li class="current"><a href="#"><img src="./img/banner06.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/banner08.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/banner07.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/banner04.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/banner02.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/banner05.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/banner01.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/banner03.jpg" alt=""></a></li>
            </ul>
            <ul class="indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="img-click">
                <span class="prev">&lt;</span>
                <span class="next">&gt;</span>
            </div>
        </div>
    </section>
    <section class="main">
        <div class="zhuanti">
            <div class="f1 clearfix">
                <i class="icon icon-jx"></i>
                <span class="title">精选专题</span>
            </div>
            <div class="f2">
                <a href="#">100万党建素材、PPT汇报模板无线下载，每天仅需0.18元立享UIP特权</a>
            </div>
            <div class="f3 clearfix"><a href="#">更多>></a></div>
        </div>
        <div class="picture1">
            <div class="ppp">
                <div class="pic1"><a href="#"></a></div>
                <div id="yinying"> </div>
                <section class="content">
                    <p>和啤酒有关</p>
                    <p>啤酒是如何拯救世界的</p>
                </section>
            </div>
            <div class="ppp">
                <div class="pic2"><a href="#"></a></div>
                <div id="yinying"> </div>
                <section class="content">
                    <p>爱的元素背景</p>
                    <p>七夕到，让爱在途中发芽</p>
                </section>
            </div>
            <div class="ppp">
                <div class="pic3"><a href="#"></a></div>
                <div id="yinying"> </div>
                <section class="content">
                     <p>鲜花背景精选</p>
                    <p>为你的设计锦上添花</p>
                </section>
            </div>
            <div class="ppp">
                <div class="pic4"><a href="#"> </a></div>
                <div id="yinying"> </div>
                <section class="content">
                    <p>枫叶元素背景精选</p>
                    <p>一叶而知秋</p>
                </section>
            </div>
        </div>
        <div class="haibao">
            <div class="f22 clearfix">
                <i class="icon icon-hb"></i>
                <span class="title">商用海报</span>
            </div>
            <div class="f2">
                <a href="#">招聘海报</a>
                <a href="#">配图海报</a>
                <a href="#">企业文化</a>
                <a href="#">促销海报</a>
                <a href="#">原创插画</a>
            </div>
            <div class="f3 clearfix"><a href="#">更多>></a></div>
        </div>
        <div class="picture2">
            <div class="jjjw">
                <div class="jjj">
                    <div class="pic11">
                        <a href="#"><i class="icon icon-yuanchuang"></i></a>
                        <div id="bbb"></div>
                        <div id="content2">
                            <div class="ha1">
                                <i class="icon icon-card1"></i>
                                <p class="xiazai">18</p>
                            </div>
                            <div class="ha2">
                                <i class="icon icon-card2"></i>
                                <p class="dingyue">2</p>
                            </div>
                        </div>                 
                    </div>
                
                </div>
            </div>
            

            <div class="jjjw">
                <div class="jjj">
                    <div class="pic22">
                        <a href="#"><i class="icon icon-yuanchuang"></i></a>
                        <div id="bbb"></div>
                        <div id="content2">
                            <div class="ha1">
                                <i class="icon icon-card1"></i>
                                <p class="xiazai">18</p>
                            </div>
                            <div class="ha2">
                                <i class="icon icon-card2"></i>
                                <p class="dingyue">2</p>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
           

            <div class="jjjw">
                <div class="jjj">
                    <div class="pic33"><a href="#"><i class="icon icon-yuanchuang"></i></a>
                        <a href="#"><i class="icon icon-yuanchuang"></i></a>
                        <div id="bbb"></div>
                        <div id="content2">
                            <div class="ha1">
                                <i class="icon icon-card1"></i>
                                <p class="xiazai">18</p>
                            </div>
                            <div class="ha2">
                                <i class="icon icon-card2"></i>
                                <p class="dingyue">2</p>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <!---->

            <div class="jjjw">
                <div class="jjj">
                    <div class="pic44">
                         <a href="#"><i class="icon icon-yuanchuang"></i></a>
                        <div id="bbb"></div>
                        <div id="content2">
                            <div class="ha1">
                                <i class="icon icon-card1"></i>
                                <p class="xiazai">18</p>
                            </div>
                            <div class="ha2">
                                <i class="icon icon-card2"></i>
                                <p class="dingyue">2</p>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="yc1"><a href="#">文艺夏日时光菠萝蓝色简约海报设计微信配图</a></div>
             <div class="yc1"><a href="#">七夕情人节扁平风创意简约商业海报设计模板</a></div> 
            <div class="yc1"><a href="#">文艺夏日时光菠萝蓝色简约海报设计微信配图</a></div>
            <div class="yc1"><a href="#">我的前半生文艺情感配图海报设计</a></div> 
        </div>
    </section>
    <section class="last">
        <div class="last-box clearfix">
            <div class="last-left clearfix">
                <ul class="w1">
                    <li>
                        <a href="#">
                            <h3>常见问题</h3>
                        </a>
                    </li>
                    <div id="green">
                        <li><a href="#">成为特邀设计师</a></li>
                        <li><a href="#">成为原创贡献者</a></li>
                        <li><a href="#">注册登录</a></li>
                        <li><a href="#">账号/密码</a></li>
                        <li><a href="#">充值/售后</a></li>
                        <li><a href="#">版权投诉</a></li>
                    </div>
                </ul>
                <ul class="w1">
                    <li>
                        <a href="#">
                            <h3>关于千千网</h3>
                        </a>
                    </li>
                    <div id="green">
                        <li class="green"><a href="#">关于我们</a></li>
                        <li><a href="#">媒体报道</a></li>
                        <li><a href="#">加入我们</a></li>
                        <li><a href="#">心系千图</a></li>
                        <li><a href="#">每日最新</a></li>
                    </div>
                </ul>
                <ul class="w1">
                    <li>
                        <a href="#">
                            <h3>产品服务</h3>
                        </a>
                    </li>
                    <div id="green">
                        <li><a href="#">官方微博</a></li>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">千图导航</a></li>
                    </div>
                </ul>
                <ul class="w1">
                    <li>
                        <a href="#">
                            <h3>友情链接</h3>
                        </a>
                    </li>
                    <div id="green">
                        <li class="green"><a href="#">我图网</a></li>
                        <li><a href="#">千库网</a></li>
                        <li><a href="#">摄图网</a></li>
                        <li><a href="#">包图网</a></li>
                        <li><a href="#">视达网</a></li>
                        <li><a href="#">更多>></a></li>
                    </div>
                </ul>
            </div>
            <div class="last-right clearfix">
                <p class="P1"><a href="#">客服咨询</a></p>
                <p class="P2">
                    <i class="icon icon-phone"></i> 400-998-7011
                    <em>(9:00-18:00)</em>
                </p>
                <p class="P3">
                    <i class="icon icon-email"></i>
                    <a href="#">feedback@58pic.com</a>
                </p>
                <p class="P4"><a href="#">
              <i class="icon icon-qq"></i>
              点我交谈
              </a></p>
            </div>
        </div>
        <section class="bottom">
            <p class="m1">
                <i class="icon icon-xinlang"></i>
                <i class="icon icon-weibo"></i>
            </p>
            <p class="m2" id="green">
                <a href="#">注册声明</a>
                <a href="#">版权声明</a>
                <a href="#">售后服务</a>
            </p>
            <p class="m3">
                Copyright ©2013-2017 千图网
                <a href="#" class="hao">沪ICP备10011451号-6</a>
                <a href="#"><i class="icon icon-wei"></i></a> 上海工商 安全实名验证 信用网站
            </p>
        </section>
    </section>

</body>

</html>
<script>
    // 输入框的焦点事件
    var searchBox = document.querySelector('.search-box');
    var searchInput = document.querySelector('.search input');
    searchInput.onfocus = function () {
        searchBox.style.borderColor = '#17e66c';
    }
    searchInput.onblur = function () {
        searchBox.style.borderColor = '';
    }
    // 轮播图
    window.onload = function () {
        var box = document.querySelector('.box');
        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var lbt = document.querySelector('.lbt');
        var bgColorArr = ['#fef8b3', '#f4cad8', '#110204', '#2e9cfe', '#feff0f', '#89dce3', '#060606', '#fdf100']
        var index = 0;//记录当前的索引值
        // 上一张
        function prevImg() {
            index = index == 0 ? imgLis.length - 1 : index - 1;
            showImg();
        }
        // 下一张
        function nextImg() {
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }
        // 展示图片
        function showImg() {
            //先清空图片和指示灯的类名， 当i=5时for循环结束
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
            }
            // console.log(index);//第一次打印出index=1
            imgLis[index].className = 'current';
            indicatorLis[index].className = 'active';
            lbt.style.backgroundColor = bgColorArr[index];
        }
        // 1.给下一张按钮设置定时器，自动切换图片
        var timer = setInterval(nextImg, 1000);
        // 2.图片跟随指示灯切换
        for (var i = 0; i < indicatorLis.length; i++) {
            // 记录指示灯的索引值
            indicatorLis[i].index = i;
            indicatorLis[i].onclick = function () {
                // 鼠标进来暂停自动切换
                clearInterval(timer);
                timer = null;
                // /根据鼠标选中的指示灯的索引来切换图片
                // 记录和更新index的值
                index = this.index;
                showImg();
            }
        }
        // 鼠标进入容器，自动切换停下来
        lbt.onmouseover = function () {
            clearInterval(timer);
            timer = null;
        }
        lbt.onmouseout = function () {
            if (timer != null) {
                return;
            }
            timer = setInterval(nextImg, 1000);
        }
        // 3.点击按钮切换
        box.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        box.onmouseout = function () {
            if (timer) return;
            timer = setInterval(nextImg, 1000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        // 点击上一张
        prev.onclick = function () {
            prevImg();
        }
        // 点击下一张
        next.onclick = function () {
            nextImg();
        }
    }

    // --------------------------------------------------
    // var ceng1 = document.querySelectorAll('.ying');
    // var allP = document.querySelectorAll('.ppp');
    // for (var i = 0; i < allP.length; i++) {
    //     allP[i].index = i;
    //     allP[i].onmouseover = function () {
    //         ceng1[this.index].style.display = 'block';
    //     }
    //     allP[i].onmouseout = function () {
    //         ceng1[this.index].style.display = 'none';
    //     }
    // }
    // ---------------------------------------------------
    // var yc1 = document.querySelectorAll('.yc1');
    // var ceng2 = document.querySelectorAll('#bbb');
    // var jjjs = document.querySelectorAll('.jjj');
    // for (var i = 0; i < jjjs.length; i++) {
    //     jjjs[i].index = i;
    //     jjjs[i].onmouseover = function () {
    //         ceng2[this.index].style.display = 'block';

    //     }
    //     jjjs[i].onmouseout = function () {
    //         ceng2[this.index].style.display = 'none';
    //     }
    // }
   // ---------------------------------------------------
//    for(var i = 0;i < yc1.length;i++){
//        yc1[i].index = i;
//        yc1[i].onmouseover = function(){
//            ceng2[this.index].style.display = 'block';
//        }
//        yc1[i].onmouseout = function(){
//            ceng2[this.index].style.display = 'none';
//        }
//    }

</script>